<template>
  <quillEditor :options="options"></quillEditor>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      options: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote'], // 标题
            ['code-block', 'image', 'video'] // 链接、图片、视频
          ]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ql-editor {
  height: 200px;
}
::v-deep .ql-toolbar.ql-snow {
  padding: 0;
  padding-left: 8px;
}
</style>
